<template>
<div class="module-root" v-loading.body="loading" ref="module">
  <div class="head">
    <!-- <div class="img" ref="move" v-on:mousedown="down($event)" v-on:mousemove="move($event)" 
    v-on:mouseup = "up($event)" @mouseout = "up($event)"> </div> -->
    <div class="title">
      <span class="label">{{data.moduleName}}</span>
      <span class="num">( {{(!total)?0:total}} )</span>
    </div>
    <SlideSwitch v-on:Newest="getNewest()" v-on:negative="getnegative()" 
    class="switch" :data="zf" :zf="true"></SlideSwitch>
  </div>
  <div class="body">
    <div class="moduleItem" v-for="(item, i) in information" :key="i">
      <div class="img" >
        <div v-bind:style="{backgroundImage:item.urlimg}" ></div>
      </div>
      <div class="content">
        <div @click="queryarticle(item)" class="title" v-html="filterHtml(item.title)"></div>
        <div @click="queryarticle(item)" class="content" v-html="filterHtml(item.content)"></div>
      </div>
      <div class="tend">
        <TendLabel :tend="parseInt(item.positiveOrNegative)"></TendLabel>
      </div>
      <div class="site">
        <div>来源</div>
        <div class="site-desc">{{item.webSite}}</div>
      </div>
      <div class="time">
        <div>{{item.poTime|fomartTime}}</div>
        <!-- <div>1</div> -->
      </div>
    </div>
  </div>
  <div class="foot">
      <div class="btns">
          <img src="./img/icon-setting.png" @click="goSetting()" title="首页模块设置">
          <img src="./img/icon-ci.png" @click="gothisSetting(data.id)" title="关键词修改">
          <img src="./img/icon-fresh.png" @click="refurbish()"  title="刷新">
      </div>
      <div class="more" @click="tomore()">更多>></div>
  </div>
</div>
</template>

<script>
import moment from 'moment'
import SlideSwitch from 'components/common/SlideSwitch'
import TendLabel from 'components/common/TendLabel'
import ModuleFull from './ModuleFull'
import homeMore from './homeMore'
import {nextFrame} from 'utils'

let ostyle
let mouseDownX,mouseDownY,initX,initY,ol,ot,l,t;
let zf = [{label:'最新'},{label:'负面'}]
export default {
  name: 'module',
  props: ['data'],
  components: {SlideSwitch, ModuleFull, TendLabel,homeMore},
  data(){
    return {
      full: false,
      information:[],
      total:0,
      loading:false,
      _information:[],
      _total:0,
      initX,
      initY,
      isDown:false,
      l,
      t,
      flag:0,
      zf
    }
  },
  mounted(){
    this.$nextTick(function(){
      this.getInformation()
    })
  },
  filters:{
    fomartTime(value){
      return moment(parseInt(value)).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  methods:{
    // 最新
    getNewest(){
      // this.zf[0].color='#565656'
      // this.zf[1].color='#888787'
      this.information = this._information
      this.total = this._total
      this.flag = 0
    },
    // 负面
    getnegative(){
        // this.zf[1].color='#565656'
        // this.zf[0].color='#888787'
        this.loading=true
        this.flag = 1
        this.$http.get('/vrv-monitor-platform-web/module/query?moduleId='+this.data.id+"&positiveOrNegative=2").then((res)=>{
          (res.body.data instanceof Array)&&res.body.data.map(d=>{
            let imgurl = d.domain
            this.$http.get(`static/${imgurl}.png`).then(res=>{
              this.$set(d,'urlimg', `url(static/${imgurl}.png)` )
            }).catch(err=>{
              this.$set(d,'urlimg',"url('static/defult.png')")
            })
          })
          this.information = res.body.data
          this.loading=false
          this.total = res.body.total
        }).catch(err=>{
          this.$message.error(err)
          this.loading=false
      })
    },
    filterHtml(value){
      let html = value.replace(/{{{/g,"<span class='light' style='color:red'>").replace(/}}}/g,"</span>")
      return html
    },
    getInformation:function(){
      this.loading=true
      this.$http.get('/vrv-monitor-platform-web/module/query?moduleId='+this.data.id+"&positiveOrNegative=-1").then((res)=>{
          (res.body.data instanceof Array)&&res.body.data.map(d=>{
          let imgurl = d.domain
          this.$http.get(`static/${imgurl}.png`).then(res=>{
            this.$set(d,'urlimg', `url(static/${imgurl}.png)` )
          }).catch(err=>{
            this.$set(d,'urlimg',"url('static/defult.png')")
          })
        })
        this.information = res.body.data
        this._information = res.body.data
        this.total = res.body.total
        this._total = res.body.total
        this.loading=false
      }).catch(err=>{
        this.$message.error(err)
        this.loading=false
      })
    },
    tomore:function(){
      this.$router.push('/home/page/'+this.data.id);
    },
    goSetting(){
      this.$router.push('/Setting/manage');
    },
    // 文章查询
    queryarticle(item){
      // this.$store.commit('LoadingTrue');
      let pirnt = ''
      this.$store.dispatch('queryarticle',{
        id:item.id,
        keywords:this.keywords,
        titleContentPrint:pirnt,
        module_id:this.data.id
      });
    },
    // 刷新
    refurbish(){
      this.loading=true
      if(this.flag ===0){
        // 全部
        this.getInformation()
      }else{
        this.getnegative()
      }
    },
    gothisSetting(id){
      this.$store.commit('setmoduleId',{
        id:id,
        flag:true
      });
      this.$router.push('/setting/manage');
    },
  }
}
</script>

<style lang="stylus" scoped>
.imgtoper
  float left
  // background url('./img/111.png') no-repeat
  background-position 50% 50%
  height 3.44rem
  width 2rem
  margin-left 1rem
  cursor move
.module-root
  height 500px
  transition all 0.65s
  float left
  width: calc(50% - 1.3rem)
  background white
  border-radius 0.4rem
  margin-bottom 1.25rem
  margin-right 1.3rem
 
    
.head
  position relative
  height 3.44rem
  border-bottom 1px solid #dcdcdc
  >.title
    box-sizing border-box
    float left
    // height calc(100% + 1px);
    padding 0 1.00rem 0 0.25rem
    font-size 1.2rem
    line-height 3.44rem
    margin-left 1.4rem
    color #565656
    font-weight 400
    >.num
      color #565656
  >.switch
      position absolute
      top 0.68rem
      right 0.6rem

.body
  height 17.8rem
  border-bottom 1px solid #dcdcdc
  overflow hidden

.foot
  height 2.5rem
  box-sizing border-box
  >.btns
    float left
    img
      width 21px
      height 21px
      margin-top 8px
      margin-left 12px
      cursor pointer
      &:first-of-type
        margin-left 20px
  >.more
    margin-top 8px
    float right
    font-size 0.88rem
    line-height 1.5rem
    margin-right 15px
    color #666
    cursor pointer

.moduleItem
  height 4.4rem
  border-bottom 1px solid #dcdcdc
  display flex
  &:nth-child(5)
    border-bottom 0
  >.img
    padding 0.84rem 1rem
    >div
      display block
      height 2.75rem
      width 2.75rem
      border 1px solid #e6e6e6
      border-radius 50%
      background-size cover
  >.content
    overflow: hidden;
    padding-top 0.8rem
    padding-right 1rem
    font-size 0.88rem
    flex-grow 1
    cursor pointer
    border-right 1px solid #dcdcdc
    >.title
      font-weight bold
      margin-bottom 0.5rem
      line-height 1rem
      height 1rem
      overflow hidden
    >.content
      flex-shrink  0
      line-height 1.4rem
      height 1.4rem
      overflow hidden
      color #666666
  >.tend
    padding 1.13rem 0.88rem
    border-right 1px solid #dcdcdc
    flex-shrink  0
  >.site
  >.time
    padding-top 0.7rem
    line-height 1.5rem
    font-size 0.88rem
    width 6.2rem
    flex none
    text-align center
    flex-shrink  0 
  >.time div
    padding 0 0.5rem
  >.site
    border-right 1px solid #dcdcdc
    overflow hidden
  >.time
    font-family consolas
.site-desc
  overflow hidden
  text-overflow ellipsis
  white-space nowrap
  padding 0 0.5rem
</style>
